<template>
  <div class="main">
    <div class="datatext" >
      <span class="line"></span>
      <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;筛选条件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="line"></span>
    </div>
    <el-form style="width:100%" :inline="true" :rules="rules" :model="screeninginfor" ref="screeninginfor" class="screeninginfor">
      <el-form-item label="转咨询开始时间" id="stop_consulting_div" prop="start_consulting_time">
        <el-date-picker v-model="start_consulting_time" type="date" @change="startDate()" value-format="yyyy-MM-dd" placeholder="转咨询开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="转咨询结束时间" id="stop_consulting_div" prop="stop_consulting_time">
        <el-date-picker v-model="stop_consulting_time" type="date" @change="stopDate()" value-format="yyyy-MM-dd" placeholder="转咨询结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" id="resourceanalysis" @click="customerconversion()">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="datatext">
      <span class="line"></span>
      <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;统计结果&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="line"></span>
    </div>
    <div class="billstyle">
      <span class="area_class">地区占比</span>
    </div>
    <el-table :data="areaData.result"     
      max-height="300"
      border
      class="tableClass">
      <el-table-column v-for="key in areaData.listkey" :key="key" :prop="key"
          :label="key"></el-table-column>
    </el-table>
    <div class="billstyle">
      <span class="area_class">学校类型占比</span>
    </div>
    <el-table :data="schooltypeData.result"     
      max-height="300"
      border
      class="tableClass">
      <el-table-column v-for="key in schooltypeData.listkey" :key="key" :prop="key"
          :label="key"></el-table-column>
    </el-table>
    <div class="billstyle">
      <span class="area_class">学校名占比</span>
    </div>
    <el-table :data="schoolnameData.result"     
      max-height="300"
      border
      class="tableClass">
      <el-table-column v-for="key in schoolnameData.listkey" :key="key" :prop="key"
          :label="key"></el-table-column>
    </el-table>
    <div class="billstyle">
      <span class="area_class">年级占比</span>
    </div>
    <el-table :data="gradeData.result"     
      max-height="300"
      border
      class="tableClass">
      <el-table-column v-for="key in gradeData.listkey" :key="key" :prop="key"
          :label="key"></el-table-column>
    </el-table>
    <!-- <div class="billstyle">
      <span class="area_class">申请层级入学时间占比</span>
    </div>
    <el-table :data="graduationData.result"     
      max-height="300"
      border
      class="tableClass">
      <el-table-column v-for="key in graduationData.listkey" :key="key" :prop="key"
          :label="key"></el-table-column>
    </el-table> -->
    <div class="billstyle">
      <span class="area_class">课程体系占比</span>
    </div>
    <el-table :data="curriculumData.result"     
      max-height="300"
      border
      class="tableClass">
      <el-table-column v-for="key in curriculumData.listkey" :key="key" :prop="key"
          :label="key"></el-table-column>
    </el-table>
    <div class="billstyle">
      <span class="area_class">所属顾问占比</span>
    </div>
    <el-table :data="consultantData.result"     
      max-height="300"
      border
      class="tableClass">
      <el-table-column v-for="key in consultantData.listkey" :key="key" :prop="key"
          :label="key"></el-table-column>
    </el-table>
    <div class="billstyle">
      <span class="area_class">转咨询平均时长</span>
    </div>
    <el-table :data="transfertimeData.result"     
      max-height="300"
      border
      class="tableClass">
      <el-table-column v-for="key in transfertimeData.listkey" :key="key" :prop="key"
          :label="key"></el-table-column>
    </el-table>
    <div class="billstyle">
      <span class="area_class">转换率</span>
    </div>
    <el-table :data="conversionrateData.result"     
      max-height="300"
      border
      class="tableClass">
      <el-table-column v-for="key in conversionrateData.listkey" :key="key" :prop="key"
          :label="key"></el-table-column>
    </el-table>
    <div class="billstyle">
      <span class="area_class">签约率</span>
    </div>
    <el-table :data="csigningData.result"     
      max-height="300"
      border
      class="tableClass">
      <el-table-column v-for="key in csigningData.listkey" :key="key" :prop="key"
          :label="key"></el-table-column>
    </el-table>

  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
      return{
        csigningData:{
        result: [],
        listkey:[],
      },
        conversionrateData:{
        result: [],
        listkey:[],
      },
        transfertimeData:{
        result: [],
        listkey:[],
      },
        consultantData: {
        result: [],
        listkey:[],
      },
      curriculumData: {
        result: [],
        listkey:[],
      },
      gradeData: {
        result: [],
        listkey:[],
      },
      areaData: {
        result: [],
        listkey:[],
      },
      schooltypeData: {
        result: [],
        listkey:[],
      },
      schoolnameData: {
        result: [],
        listkey:[],
      },
      rules: {
      start_consulting_time:[{
        required: true,
        message: "转咨询开始时间不能为空",
        trigger: "blur"
      }],
      stop_consulting_time: [{
        required: true,
        message: "转咨询结束时间不能为空",
        trigger: "blur"
      }],
      sales: [{
        required: true,
        message: "销售人员不能为空",
        trigger: "blur"
      }]
      },
      start_consulting_time:"", //转咨询开始时间
      stop_consulting_time:"", //转咨询结束时间
      
      high_quantity:[],
      imageshow: '',
      opinion: [], //x 轴显示内容
      opinionData: [], // 显示数据
      assistant:[], //小助手
      sources: [{
        value: '知乎',
        label: '知乎'
      }, {
        value: '群裂变',
        label: '群裂变'
      }, {
        value: '前台电话',
        label: '前台电话'
      }, {
        value: '自有平台',
        label: '自有平台'
      }, {
        value: '线下活动',
        label: '线下活动'
      }, {
        value: '网络搜索',
        label: '网络搜索'
      }, {
        value: '公众号投放',
        label: '公众号投放'
      }, {
        value: '老客户介绍',
        label: '老客户介绍'
      }, {
        value: '其他',
        label: '其他'
      }],
      source: '',
      customer_states: [{
        value: '已分配未购买',
        label: '已分配未购买'
      }, {
        value: '已分配已购买',
        label: '已分配已购买'
      },],
      customer_state: '',
      screeninginfor:{
          stop_consulting_time:"",
          start_consulting_time:""
      },

    }
  },
  created() {

    var pro_data = window.sessionStorage.getItem("analysisinfor")
    var tab_data = window.sessionStorage.getItem("tabledata")
    if (pro_data ){
      this.analysisinfor = JSON.parse(pro_data)
      this.tableData = JSON.parse(tab_data)
    }
   
  },

  methods:{
    startDate(){
      this.rules.start_consulting_time[0].required = false
    },
    stopDate(){
      this.rules.stop_consulting_time[0].required = false
    },
    async customerconversion(){
      if (this.start_consulting_time == ""){
        this.$message({
        type: "warning",
        message: "请选择转咨询开始日期"
        },)
        return
      }
      if (this.stop_consulting_time== ""){
        this.$message({
        type: "warning",
        message: "请选择转咨询结束日期"
        },)
        return
      }
      if (this.start_consulting_time>this.stop_consulting_time){
        this.$message({
        type: "warning",
        message: "结束日期不能大于开始日期"
        },)
        return
      }
      // this.$refs.screeninginfor.validate(async (valid) => {
      // if (valid) {
        this.screeninginfor.start_consulting_time = this.start_consulting_time
        this.screeninginfor.stop_consulting_time = this.stop_consulting_time
        const res = await this.$ajax.post(`/customerconversion/`,this.screeninginfor);
        let obj = JSON.parse(res.data)
        //提取地区表头字段
        this.areaData.result = obj.area_data
        for (let i = 0, l = this.areaData.result.length; i < l; i++) {
          for (let key in this.areaData.result[i]) {
            if (this.areaData.listkey.indexOf(key)==-1){
                this.areaData.listkey.push(key)
            }
          }
        }
        //提取学校类型表头字段
        this.schooltypeData.result = obj.set_school_type
        for (let i = 0, l = this.schooltypeData.result.length; i < l; i++) {
          for (let key in this.schooltypeData.result[i]) {
            if (this.schooltypeData.listkey.indexOf(key)==-1){
                this.schooltypeData.listkey.push(key)
            }
          }
        }
        //提取学校名表头字段
        this.schoolnameData.result = obj.school
        for (let i = 0, l = this.schoolnameData.result.length; i < l; i++) {
          for (let key in this.schoolnameData.result[i]) {
            if (this.schoolnameData.listkey.indexOf(key)==-1){
                this.schoolnameData.listkey.push(key)
            }
          }
        }
        //提取年级表头字段
        this.gradeData.result = obj.grade
        for (let i = 0, l = this.gradeData.result.length; i < l; i++) {
          for (let key in this.gradeData.result[i]) {
            if (this.gradeData.listkey.indexOf(key)==-1){
                this.gradeData.listkey.push(key)
            }
          }
        }
        //提取课程体系表头字段
        this.curriculumData.result = obj.curriculum_system
        for (let i = 0, l = this.curriculumData.result.length; i < l; i++) {
          for (let key in this.curriculumData.result[i]) {
            if (this.curriculumData.listkey.indexOf(key)==-1){
                this.curriculumData.listkey.push(key)
            }
          }
        }
        //提取课程体系表头字段
        this.consultantData.result = obj.consultant
        for (let i = 0, l = this.consultantData.result.length; i < l; i++) {
          for (let key in this.consultantData.result[i]) {
            if (this.consultantData.listkey.indexOf(key)==-1){
                this.consultantData.listkey.push(key)
            }
          }
        }
        //提取转咨询平均表头字段
        this.transfertimeData.result = obj.transfer_time
        for (let i = 0, l = this.transfertimeData.result.length; i < l; i++) {
          for (let key in this.transfertimeData.result[i]) {
            if (this.transfertimeData.listkey.indexOf(key)==-1){
                this.transfertimeData.listkey.push(key)
            }
          }
        }
        //提取转换率表头字段
        this.conversionrateData.result = obj.conversion_rate
        for (let i = 0, l = this.conversionrateData.result.length; i < l; i++) {
          for (let key in this.conversionrateData.result[i]) {
            if (this.conversionrateData.listkey.indexOf(key)==-1){
                this.conversionrateData.listkey.push(key)
            }
          }
        }
        //提取签约率表头字段
        this.csigningData.result = obj.signing
        for (let i = 0, l = this.csigningData.result.length; i < l; i++) {
          for (let key in this.csigningData.result[i]) {
            if (this.csigningData.listkey.indexOf(key)==-1){
                this.csigningData.listkey.push(key)
            }
          }
        }
        // }})
    },
    async common_age(heght){
      if (this.high_quantity.indexOf(heght)==-1){
        var oDiv = document.getElementById(heght)
        oDiv.style.backgroundColor = "#094572"
        oDiv.style.color = "#fff"
        this.high_quantity.push(heght)
      }
      else{
        var oDiv = document.getElementById(heght)
        oDiv.style.backgroundColor = "#fff"
        oDiv.style.color = "#094572"
        this.high_quantity.splice(this.high_quantity.indexOf(heght),1)
      }

      this.screeninginfor.customer_state = this.customer_state
      const res = await this.$ajax.post(`/commonage/`, this.screeninginfor);
      let obj = JSON.parse(res.data)
      if (obj.status==200){
        this.opinion =  obj.x_data
        this.opinionData = obj.value_list
      }else{
          this.$message({
            type: "warning",
            message: obj.message
            },)
          this.opinion =  []
          this.opinionData = []
          return
          }
      this.imageshow = echarts.init(document.getElementById('imageshow'))
      this.imageshow.setOption({
        title: {
          text: '人数'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}'
        },
        // legend: {
        //   orient: 'vertical',
        //   x: 'right',
        //   y: 'top',
        //   data: ['评估概率']
        // },
        xAxis: {
          data: this.opinion
        },
        yAxis: {},
        series: [{
          name: '人数',
          type: 'bar',
          data: this.opinionData,
          itemStyle: {
            emphasis: {
              shadowBlur: 2,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            color: function (params) {
              // 自定义颜色
              var colorList = ['#1ab394', "#094572"]
              return colorList[params.dataIndex]
            }
          }
        }]
      })
    }

  }
}
</script>

<style scoped lang="less">

#resourceanalysis{
  margin-top: 0px;
  width: 200px;
}
.contentdiv:hover{
  background-color: #094572;
  color: #fff;
}
.contentdiv_one:hover{
  background-color: #094572;
  color: #fff;
}

.contentdiv_one{
  width: 130px;
  display: inline-block;
  border:1px solid #DCDFE6;
  background: #fff;
  color: #094572;
  padding: 10px 20px;
  border-radius: 15px;
  text-align:center;
  cursor: pointer;
  margin-left: 55px;
  margin-top: 30px;
}
.contentdiv{
  width: 130px;
  display: inline-block;
  border:1px solid #DCDFE6;
  background: #fff;
  color: #094572;
  padding: 10px 20px;
  border-radius: 15px;
  margin-left: 60px;
  text-align:center;
  cursor: pointer;
  margin-top: 30px;

}
.el-button{
  margin-left: 70px;
  border-radius: 20px;
}
#imageshow{
  width:600px;
  height:250px;
  margin-left: 300px;
  
}
.el-button.is-round{
  margin-left: 70px;
}
.el-button{
  background:#fff;
  color:#094572
}
.screeninginfor{
  margin-top: 30px;
}
.line {
  display: inline-block;
  width:530px;
  border-top: 1px solid #cccccc;
  vertical-align: 5px;
  margin-top: 30px;
  font-weight: bold;
}
/* 筛选条件 */
.datatext {
  // margin-top: 50px;
  height: 30px;
  line-height: 36px;
  text-align: center;
  color: #094572;
  margin-left: 10px;
  margin-bottom: 50px;
}
.el-button:focus,.el-button:hover {
  background: #094572;
  border-color: #271849;
  color: #fff;
}
.el-button--primary{
    margin-left: 100px;
    width: 220px;
    height: 40px;
    font-size: 18px;
    background-color: #094572;
    border: none;
    border-radius: 10px;
    color: #FFFFFF;
    // margin-bottom: 50px;
    margin-top: 30px;
}
.el-table--border{
  margin-left: 4%;
}
.quantity{
  color: rgb(194, 187, 187)
}
#start_consulting_div{
  margin-left: 15px;
}
#stop_consulting_div{
  margin-left: 45px;
}
.tableClass{
  margin-left: 155px;
  width: 900px;
  // height: 300px;
  margin-bottom: 30px;
}
.area_class{
    top: 30px;
    left: 45px;
    font-size: 18px;
}
.billstyle{
  text-align: center;
  display:block;
  width: 200px;
  height: 30px;
  background-color: #094572;
  color: #fff;
  margin-left: 155px;
  border-radius: 10px;
}
</style>